<template>
	<div class="explore">
		<div class="exploreMain"  v-loading="loading">
			<el-card shadow="always" v-for='(val,index) in imgList' :key='val.id' @click.native='openDrawer(val)'>
				<img :src="val.url" alt="" class="image" >
			</el-card>
		</div>
		<el-pagination
			background
			layout="total, prev, pager, next, jumper"
			:total="imgCount" 
			:page-size=20
			@current-change="handleCurrentChange">
		</el-pagination>
		<el-drawer
			class='imgDrawer'
			size='68%'
			title="图片详情"
			:modal-append-to-body='false'
			:append-to-body='true'
			:visible.sync="drawer"
			direction="rtl">
			<imgDetail :drawerData='drawerData' ></imgDetail>
		</el-drawer>
	</div>
</template>
<script>
	import imgDetail from '@/components/imgDetail'
	import {api} from '@/api/public'
	export default{
		name:'explore',
		data(){
			return{
				imgList:[],
				drawerData:'',
				drawer:false,
				page:1,
				imgCount:0,
				loading:true
			}
		},
		methods:{
			openDrawer(row) {
				this.drawer=true;
				this.drawerData=row;
			},
			handleCurrentChange(page) {
				this.page=page;
				this.loading=true;
				this.getExplore();
				let main=document.querySelector('main');
				main.scrollTop=0;
			},
			async getExplore(){
				let data=await api('get','image','getExplore',{page:this.page});
				this.imgList=data.result;
				this.imgList.forEach(val=>{
					val.url.replace('large',"small");  
				})
				let result=await api('get','image','getExploreCount');
				this.imgCount=result.imgCount;
				setTimeout(()=>{
					this.loading=false;
				},420)
			},
		},
		created(){
			this.getExplore();
			this.$bus.$on('DeleteImg',()=>{
				this.getExplore();
			});
		},
		destroyed () {
			this.$bus.$off('DeleteImg');
		},
		components:{
			imgDetail
		}
	}
</script>
<style scoped lang='stylus'>
	.explore{
		text-align: center;
		.exploreMain{
			// column-count:3;
			columns:4;
			width: 78%;
			margin:0 auto;
			column-gap: 2em;	
			.el-card {
				padding: 1.1em;
				margin-bottom: 2em;
				-moz-page-break-inside: avoid;
				-webkit-column-break-inside: avoid;
				break-inside: avoid;
				cursor: pointer;
				box-shadow: 1px 5px 7px 1px rgba(0,0,0,.12);
				background:#eee;
				.image{
					max-width: 88%;
				}
				>>>.el-card__body {
					display: flex;
					padding:0; 
					height: 100%;
					align-items: center;
					justify-content: center;
				}	
			}
		}
		.imgDrawer{
			>>> .rtl{
				overflow: auto;
			}
		}
		.el-pagination {
			margin: 3em 0;
		}
		>>> .el-loading-spinner {
			position: fixed;
			top:37%;
			left: 50%;
			transform: translateX(-50%);
			.circular {
				width:5em;
				height: 5em;
			}
		}
	}
	@media screen and (max-width: 1500px){
		.explore .exploreMain {
			columns:3;
		}
	}
	@media screen and (max-width: 1200px){
		.explore .exploreMain {
			columns:2;
		}
	}
	@media screen and (max-width: 900px){
		.explore .exploreMain {
			columns:1;
		}
	}
</style>